<template>
  <div class="layout-container">
    <!-- 侧边栏 -->
    <div class="sidebar">
      <!-- 用户信息 -->
      <div class="user-info">
        <!-- 用户头像 -->
        <img :src="userAvatar" class="user-avatar" />
        <!-- 显示用户名 -->
        <div class="user-details">
          <span class="user-name">{{ userName }}</span>
          <!-- 显示用户角色 -->
          <span class="user-role">{{ userRoleText }}</span>
        </div>
      </div>
      <el-menu
        :default-active="route.name"
        mode="vertical"
        @select="handleMenuSelect"
        background-color="#333"
        text-color="#fff"
        active-text-color="#ffd700"
      >
        <el-menu-item index="PurchaseManagement">
          采购管理
        </el-menu-item>
        <el-menu-item index="SalesManagement">
          销售管理
        </el-menu-item>
        <el-menu-item index="InventoryManagement">
          库存管理
        </el-menu-item>
        <el-menu-item index="AttendanceManagement">
          考勤管理
        </el-menu-item>
        <el-menu-item index="ProcessManagement">
          流程管理
        </el-menu-item>
        <el-menu-item index="UserManagement">
          用户管理
        </el-menu-item>
      </el-menu>
    </div>
    <!-- 主内容区域 -->
    <div class="main-content">
      <!-- 路由视图，传递用户信息 -->
      <router-view :userInfo="{
        userRole: userRole
      }"></router-view>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMenu, ElMenuItem } from 'element-plus';
import request from '../utils/request'; // 假设这是你的请求工具
// 获取当前路由和路由实例
const route = useRoute();
const router = useRouter();
// 定义用户信息
const userAvatar = ref('');
const userName = ref('');
const userRole = ref(null);
const userRoleText = ref('');

// 导航方法
const handleMenuSelect = (index) => {
  router.push({ name: index });
};

// 获取用户信息
const fetchUserInfo = async () => {
  try {
    const response = await request.get('/user/getUserInfo'); // 假设这是获取用户信息的接口
    const { username, role, imagePath } = response.data;
    userName.value = username;
    userRole.value = role;
    userAvatar.value = imagePath;
    // 根据角色编号显示对应的角色文本
    userRoleText.value = role === 0 ? '管理员' : '普通员工';
  } catch (error) {
    console.error('获取用户信息失败:', error);
  }
};

onMounted(() => {
  fetchUserInfo();
});
</script>

<style scoped>
.layout-container {
  display: flex;
  height: 100vh;
  background-color: #f4f7fa; /* 整体背景颜色，浅灰色调 */
  width: 100%;
}

.sidebar {
  width: 220px; /* 侧边栏宽度固定 */
  background-color: #333; /* 侧边栏背景颜色，深灰色 */
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); /* 侧边栏右侧阴影效果 */
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* 用户信息样式 */
.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  color: #fff; /* 用户信息文字颜色 */
}

/* 用户头像样式 */
.user-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 15px;
  object-fit: cover; /* 确保头像图片完整显示 */
}

/* 用户详情样式 */
.user-details {
  display: flex;
  flex-direction: column;
}

/* 用户名称样式 */
.user-name {
  font-size: 18px;
  font-weight: 600; /* 用户名加粗 */
  margin-bottom: 3px;
}

/* 用户角色样式 */
.user-role {
  font-size: 14px;
  color: #ccc; /* 角色文字颜色稍浅 */
}

/* 让 el-menu 内的菜单项内容居中 */
.sidebar .el-menu .el-menu-item {
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s; /* 菜单项背景颜色过渡效果 */
}

.sidebar .el-menu .el-menu-item:hover {
  background-color: #444; /* 菜单项鼠标悬停背景颜色 */
}

.main-content {
  flex: 1;
  padding: 30px;
  box-sizing: border-box;
  overflow-y: auto;
  background-color: #fff; /* 主内容区域背景颜色为白色 */
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1); /* 主内容区域左侧阴影效果 */
}
</style>